<template>
  <div 
    :class="cellClasses"
    :style="cellStyle"
    @click="handleClick"
  >
    {{ getEmoji(cell.color) }}
  </div>
</template>

<script>
export default {
  name: 'GameCell',
  props: {
    cell: {
      type: Object,
      required: true
    },
    index: {
      type: Number,
      required: true
    }
  },
  emits: ['click'],
  computed: {
    cellClasses() {
      return [
        'game-cell',
        `color-${this.cell.color}`,
        {
          'selected': this.cell.selected,
          'disappearing': this.cell.disappearing,
          'falling': this.cell.falling,
          'falling-new': this.cell.falling && this.cell.isNewBlock,
          'falling-short': this.cell.falling && !this.cell.isNewBlock && this.cell.fallDistance <= 2,
          'falling-medium': this.cell.falling && !this.cell.isNewBlock && this.cell.fallDistance > 2 && this.cell.fallDistance <= 4,
          'falling-long': this.cell.falling && !this.cell.isNewBlock && this.cell.fallDistance > 4
        }
      ]
    },
    cellStyle() {
      const styles = {}
      
      if (this.cell.falling && this.cell.fallDelay > 0) {
        styles['animation-delay'] = `${this.cell.fallDelay}ms`
      }
      
      // 根据下落距离动态调整动画时长，让远距离更丝滑
      if (this.cell.falling) {
        if (this.cell.isNewBlock) {
          // 新方块有更长更丝滑的动画时间
          styles['animation-duration'] = '0.8s'
        } else {
          // 原有方块根据距离调整时长，让长距离更丝滑
          const baseDuration = 0.25
          const durationMultiplier = Math.min(this.cell.fallDistance / 2.5, 2)
          styles['animation-duration'] = `${baseDuration + durationMultiplier * 0.25}s`
        }
      }
      
      return styles
    }
  },
  methods: {
    getEmoji(color) {
      const emojis = ['🔴', '🔵', '🟢', '🟡', '🟣', '🟦']
      return emojis[color]
    },
    handleClick() {
      // 防止在下落过程中点击
      if (!this.cell.falling && !this.cell.disappearing) {
        this.$emit('click', this.index)
      }
    }
  }
}
</script>

<style scoped>
.game-cell {
  width: 50px;
  height: 50px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: bold;
  color: white;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

.game-cell:hover:not(.falling):not(.disappearing) {
  transform: scale(1.1);
  border-color: #fff;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.game-cell.selected {
  border-color: #f39c12;
  transform: scale(1.1);
}

.game-cell.falling {
  cursor: default;
}

.color-0 { background: linear-gradient(45deg, #e74c3c, #c0392b); }
.color-1 { background: linear-gradient(45deg, #3498db, #2980b9); }
.color-2 { background: linear-gradient(45deg, #2ecc71, #27ae60); }
.color-3 { background: linear-gradient(45deg, #f39c12, #e67e22); }
.color-4 { background: linear-gradient(45deg, #9b59b6, #8e44ad); }
.color-5 { background: linear-gradient(45deg, #1abc9c, #16a085); }

.disappearing {
  animation: disappearSmooth 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  pointer-events: none;
}

/* 新方块从顶部进入 - 超级丝滑 */
.falling-new {
  animation: fallFromTopUltraSmooth 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
  pointer-events: none;
}

/* 短距离下落 - 微妙丝滑 */
.falling-short {
  animation: fallShortUltra 0.3s cubic-bezier(0.23, 1, 0.32, 1) both;
  pointer-events: none;
}

/* 中距离下落 - 平衡丝滑 */
.falling-medium {
  animation: fallMediumUltra 0.4s cubic-bezier(0.23, 1, 0.32, 1) both;
  pointer-events: none;
}

/* 长距离下落 - 完全丝滑 */
.falling-long {
  animation: fallLongUltra 0.5s cubic-bezier(0.23, 1, 0.32, 1) both;
  pointer-events: none;
}

@keyframes disappearSmooth {
  0% { 
    transform: scale(1); 
    opacity: 1; 
    filter: brightness(1);
  }
  25% {
    transform: scale(1.1) rotate(2deg);
    opacity: 0.95;
    filter: brightness(1.2);
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.3);
  }
  60% {
    transform: scale(0.6) rotate(8deg);
    opacity: 0.5;
    filter: brightness(1.5);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
  }
  100% { 
    transform: scale(0) rotate(15deg); 
    opacity: 0;
    filter: brightness(2);
  }
}

/* 新方块超级丝滑入场 */
@keyframes fallFromTopUltraSmooth {
  0% { 
    transform: translateY(-150px) scale(0.5) rotate(-10deg);
    opacity: 0;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    filter: blur(2px);
  }
  
  10% {
    transform: translateY(-120px) scale(0.6) rotate(-8deg);
    opacity: 0.3;
    filter: blur(1.5px);
  }
  
  25% {
    transform: translateY(-80px) scale(0.75) rotate(-5deg);
    opacity: 0.6;
    filter: blur(1px);
  }
  
  45% {
    transform: translateY(-30px) scale(0.9) rotate(-2deg);
    opacity: 0.85;
    filter: blur(0.5px);
  }
  
  65% {
    transform: translateY(-8px) scale(1.02) rotate(1deg);
    opacity: 0.95;
    filter: blur(0px);
  }
  
  80% {
    transform: translateY(2px) scale(1.06) rotate(0deg);
    opacity: 1;
  }
  
  90% {
    transform: translateY(-1px) scale(1.02);
    opacity: 1;
  }
  
  96% {
    transform: translateY(0.5px) scale(1.01);
  }
  
  100% { 
    transform: translateY(0) scale(1) rotate(0deg);
    opacity: 1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    filter: blur(0px);
  }
}

/* 短距离超级丝滑 */
@keyframes fallShortUltra {
  0% { 
    transform: translateY(-12px) scale(0.98) rotate(-0.5deg);
    opacity: 0.95;
    filter: brightness(1.05);
  }
  
  30% {
    transform: translateY(-2px) scale(1.01) rotate(0deg);
    opacity: 0.98;
    filter: brightness(1.02);
  }
  
  70% {
    transform: translateY(1px) scale(1.02);
    opacity: 1;
    filter: brightness(1);
  }
  
  90% {
    transform: translateY(-0.5px) scale(1.005);
  }
  
  100% { 
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

/* 中距离超级丝滑 */
@keyframes fallMediumUltra {
  0% { 
    transform: translateY(-25px) scale(0.95) rotate(-2deg);
    opacity: 0.8;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
    filter: brightness(1.1);
  }
  
  20% {
    transform: translateY(-12px) scale(0.98) rotate(-1deg);
    opacity: 0.9;
    filter: brightness(1.05);
  }
  
  45% {
    transform: translateY(-3px) scale(1.015) rotate(0deg);
    opacity: 0.96;
    filter: brightness(1.02);
  }
  
  70% {
    transform: translateY(2px) scale(1.03);
    opacity: 1;
    filter: brightness(1);
  }
  
  85% {
    transform: translateY(-1px) scale(1.01);
  }
  
  95% {
    transform: translateY(0.5px) scale(1.005);
  }
  
  100% { 
    transform: translateY(0) scale(1);
    opacity: 1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }
}

/* 长距离超级丝滑 */
@keyframes fallLongUltra {
  0% { 
    transform: translateY(-45px) scale(0.9) rotate(-4deg);
    opacity: 0.6;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    filter: brightness(1.15);
  }
  
  15% {
    transform: translateY(-32px) scale(0.93) rotate(-3deg);
    opacity: 0.75;
    filter: brightness(1.1);
  }
  
  35% {
    transform: translateY(-18px) scale(0.97) rotate(-1.5deg);
    opacity: 0.88;
    filter: brightness(1.05);
  }
  
  55% {
    transform: translateY(-6px) scale(1.01) rotate(0.5deg);
    opacity: 0.95;
    filter: brightness(1.02);
  }
  
  75% {
    transform: translateY(3px) scale(1.04) rotate(0deg);
    opacity: 1;
    filter: brightness(1);
  }
  
  85% {
    transform: translateY(-2px) scale(1.02);
  }
  
  92% {
    transform: translateY(1px) scale(1.01);
  }
  
  97% {
    transform: translateY(-0.5px) scale(1.005);
  }
  
  100% { 
    transform: translateY(0) scale(1) rotate(0deg);
    opacity: 1;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  }
}
</style> 